<template>
  <div class="home">
    <page-scroll :footer="true">
      <template #bg>
        <div class="bg"></div>
      </template>
      <template #content>
        <div class="head">
          <div class="container">
            <div
              class="db"
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <div class="logo">
                <img src="@/assets/images/logo.png"/>
              </div>
              <div class="lang">
                <!-- <img
                  class="la1"
                  @click="to('官网视频')"
                  src="../../../assets/images/shiping.png"
                  alt=""
                />
                <img
                  class="la1"
                  @click="to('官网链接')"
                  src="../../../assets/images/wangzhi.png"
                  alt=""
                /> -->
                <img
                  class="la1"
                  @click="clear"
                  src="../../../assets/images/public/icon-clear.png"
                />
                <img
                  class="la1"
                  @click="path_url('/my/download')"
                  src="../../../assets/images/download.png"
                />
                <img
                  @click="customerService"
                  src="../../../assets/images/Group9.png"
                />
                <img
                  class="la1"
                  @click="path_url('/my/lang')"
                  src="../../../assets/images/ico_lang.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>

        <div class="container">
          <!--      <div class="" @click="path_url('/invest/index')">跳转跳转跳转跳转</div>-->
          <div class="banner" v-if="bannerData.length != 0">
            <swiper ref="mySwiper" :options="swiperOptions2">
              <swiper-slide v-for="(item, k) in bannerData" :key="k">
                <div class="item" @click="path_url(item.forwardPath)">
                  <img :src="item.imgUrl" />
                </div>
              </swiper-slide>
            </swiper>
            <div class="hd">
              <div class="swiper-hd"></div>
            </div>
          </div>
          <div class="notice">
            <img src="@/assets/images/ico_notice.png" />
            <van-swipe
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
              vertical
            >
              <van-swipe-item
                v-for="(item, k) in noticeData"
                :key="k"
                @click="pathNotice('/information/view', item)"
              >
                <div
                  class="overflow1"
                  style="line-height: 0.52rem !important; margin-left: 0.1rem"
                >
                  {{ item.title }}
                </div>
              </van-swipe-item>
            </van-swipe>
          </div>
          <ul class="nav2">
            <li v-for="(item, k) in navData" :key="k" @click="path_url(item.url)">
              <div class="ico"><img :src="item.img"/></div>
              <div class="n">{{ item.name }}</div>
            </li>
          </ul>
          <HomeRouter />

          <!-- <div class="supporter">
            <div class="title">
              <span>{{ $t("page.doc208") }}</span>
              <span
                ><van-icon color="#fff" name="arrow" style="font-weight: 900"
              /></span>
            </div>
            <div class="list">
              <div>
                <img src="../../../assets/images/supporter1.png" alt="" />
              </div>
              <div>
                <img src="../../../assets/images/supporter2.png" alt="" />
              </div>
              <div>
                <img src="../../../assets/images/supporter3.png" alt="" />
              </div>
            </div>
          </div> -->

          <div class="part">
            <div class="item">
              <div class="content">
                <div class="title">{{ $t('page3.doc59') }}</div>
                <div class="value theme-color">{{ common.decal2(teamData.incomeAmount) }} USDT</div>
              </div>
              <img src="@/assets/images/home/jrsy.png" alt="" />
            </div>
            <div class="item">
              <div class="content">
                <div class="title">{{ $t('new.doc1') }}</div>
                <div class="value theme-color">{{ common.decal2(teamData.todayIncome) }} USDT</div>
              </div>
              <img src="@/assets/images/home/ljsy.png" alt="" />
            </div>
          </div>

          <div class="videoList" v-for="(item2, k2) in movieList" :key="k2">
            <div class="cname flex">
              <div class="n">{{ item2.name }}</div>
              <div
                class="v"
                @click="
                  path_url(
                    '/home/list?id=' + item2.categoryId + '&title=' + item2.name
                  )
                "
              >
                <van-icon color="#fff" name="arrow" />
              </div>
            </div>
            <div class="uilist">
              <ul class="list">
                <li
                  v-for="(item, k) in item2.movieList"
                  :key="k"
                  @click="checkLevel(item)"
                >
                  <div class="pic">
                    <img v-lazy="item.coverUrl" />
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div
          class="floating-window"
          :style="{
            transform: isScroll ? 'translateX(130%)' : 'translateX(0)',
          }"
        >
          <img
            v-for="(item, index) in floatingList"
            :key="index"
            :src="item.iconUrl"
            alt=""
            @click="to(item.name)"
          />
        </div>
      </template>

      <!--理财订单到期提示复购弹窗-->
      <ExpirePop v-if="showFinancial" />

      <van-popup
        v-model="isShowNotice"
        style="width: 7.2rem"
        :close-on-click-overlay="false"
      >
        <div class="no_po">
          <div class="no_po-con-box">
            <div class="no_po-con" @click="path_url(forwardPath)">
              <img
                class="noticeImg"
                v-show="sShowNoticeImg"
                style="width: 100%"
                :src="sShowNoticeImg"
              />
            </div>
          </div>

          <div
            class="close"
            v-show="showClose"
            :class="{ noBorder: waitingTime < 0 }"
          >
            <span v-if="waitingTime >= 0">{{ waitingTime }}S</span>
            <img
              v-else
              @click="handlerclose"
              src="@/assets/images/ico_close.png"
            />
          </div>
        </div>
      </van-popup>

      <template #footer>
        <glFooter :activeTitle="activeTitle"></glFooter>
      </template>
    </page-scroll>

    <AddToHomeScreen />
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { mapMutations } from "vuex";
import HomeRouter from "@/views/home/index/components/HomeRouter.vue";
import ExpirePop from "@/views/home/index/components/ExpirePop.vue";
import { bus } from "@/utils/http";
import { antiShake } from "@/utils/fun";
import AddToHomeScreen from "@/components/addToHomeScreen/index.vue";

let timer;
export default {
  data() {
    return {
      activeTitle: "home",
      titleLeft: this.$t("title.doc1"),
      showFinancial: false,
      bannerData: [],
      investData: [],
      swiperOptions2: {
        autoplay: true,
        pagination: {
          el: ".swiper-hd",
          clickable: true,
        },
        autoHeight: true,
        loop: true,
        loopedSlides: 1,
        slidesPerView: 1,
        spaceBetween: 0,
      },
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoHeight: true,
        loop: false,
        loopedSlides: 1,
        slidesPerView: 1.4,
        spaceBetween: 0,
      },

      lefticon: require("../../../assets/images/ico_notice.png"),
      noticeData: [],
      category: [],
      movieList: [],

      serviceShow: true, // 理财开关
      navData: [
        {
          name: this.$t("page4.doc164"),
          url: "/task/index",
          img: require("../../../assets/images/ico_home8.png"),
        },
        {
          name: this.$t("page3.doc116"),
          url: "/wallet/recharge",
          img: require("../../../assets/images/ico_home9.png"),
        },
        {
          name: this.$t("page.doc209"),
          url: "/wallet/withdraw",
          img: require("../../../assets/images/ico_home7.png"),
        },
        {
          name: this.$t("page1.doc79"),
          url: "/invest/index",
          img: require("../../../assets/images/ico_home2.png"),
        },
        {
          name: this.$t("page4.doc165"),
          url: "/income/index",
          img: require("../../../assets/images/ico_home3.png"),
        },
        {
          name: this.$t("page4.doc166"),
          url: "/my/invite",
          img: require("../../../assets/images/ico_home4.png"),
        },
      ],
      isShowNotice: false, // 弹窗
      sShowNoticeImg: "",
      waitingTime: -1,
      showClose: false,
      forwardPath: "",
      mykf: "",
      financialData: [],
      levelData: [], // 等级数据
      isScroll: false,
      floatingList: [
        {
          name: "telegram",
          iconUrl: require("../../../assets/images/teltgram.png"),
        },
        {
          name: "客服标识",
          iconUrl: require("../../../assets/images/service.png"),
        },
        {
          name: "客服3",
          iconUrl: require("../../../assets/images/service3.png"),
        },
      ],
      teamData: {}
    };
  },
  components: {
    ExpirePop,
    HomeRouter,
    swiper,
    swiperSlide,
    AddToHomeScreen,
  },
  created() {
    this.getService();
    this.teamInfo()
  },
  mounted() {
    let _this = this;
    this.getAds();
    this.get_notice();
    this.getLevel();
    this.getNotice();
    this.init();
    // bus.$on("shownotice", function (data) {
    //   _this.getNotice();
    // });
    window.addEventListener("scroll", this.handleScroll);
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {
    ...mapMutations(["SET_IFRAME_SRC"]),
    teamInfo() {
      this.$post(this.URL.income.team, {}).then((res) => {
        if (res.code == 0) {
          this.teamData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    handlerclose() {
      window.localStorage.setItem("ShowNoticeCount", "1");
      this.isShowNotice = false;
      this.showFinancial = true;
    },
    checkLevel(item) {
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
      //if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
      this.path_url("/home/vrdetails?id=" + item.movieId);
      // } else {
      //   this.$toast(this.$t('new.doc51'))
      // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    init() {
      this.$post(this.URL.member.url).then((res) => {
        if (res.code == 0) {
          let s = res.data[1].url;
          this.mykf = s;
        } else {
          this.$toast(res.message);
        }
      });
    },
    clear() {
      window.location.reload();
    },
    customerService() {
      this.$router.push("/customer");
    },
    // 弹窗
    getNotice() {
      const count = window.localStorage.getItem("ShowNoticeCount");

      this.showClose = false;
      this.$post(this.URL.home.notice).then((res) => {
        if (res.code == 0 && res.data.id != undefined) {
          let { imageUrl, forwardPath, waitingTime } = res.data;
          this.sShowNoticeImg = imageUrl;
          this.forwardPath = forwardPath;
          this.waitingTime = waitingTime || -1;
          setTimeout(() => {
            this.showClose = true;
            if (waitingTime > 0) {
              let timer = setInterval(() => {
                if (this.waitingTime == -1) {
                  clearInterval(timer);
                }
                this.waitingTime -= 1;
              }, 1000);
            }
          }, 3500);

          if (+count === 0 || !count) {
            this.isShowNotice = imageUrl.length > 0;
          }
        } else {
          this.showFinancial = true;
        }
      });
    },
    // 获取日期时间
    getTimeSetCookieFun() {
      var day = this.getCookieFun("day") == "" ? "" : this.getCookieFun("day");
      if (day == "") {
        this.isShowNotice = true;
        var newTime = new Date().getDate();
        this.setcookieTimeFun("day", newTime, 1);
      } else {
        var newTime = new Date().getDate();
        if (newTime > day) {
          this.isShowNotice = true;
          this.setcookieTimeFun("day", newTime, 1);
        } else {
          this.isShowNotice = true;
        }
      }
    },
    // 设置cookie时间
    setcookieTimeFun(name, value, Days) {
      value = new Date().getDate();
      var exp = new Date();
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
      document.cookie = name + "=" + value + ";expires=" + exp.toGMTString();
    },
    // 取出设置的cookie时间,存在就返回获取到的值,不存在返回''
    getCookieFun(c_name) {
      if (document.cookie.length > 0) {
        let c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
          c_start = c_start + c_name.length + 1;
          let c_end = document.cookie.indexOf(";", c_start);
          if (c_end == -1) {
            c_end = document.cookie.length;
          }
          return decodeURIComponent(document.cookie.substring(c_start, c_end));
        }
      }
      return "";
    },

    // 定期理财开关
    getService() {
      this.$post(this.URL.home.service_value, { code: 200 }).then((res) => {
        if (res) {
          if (res.data == "true") {
            this.serviceShow = true;
          } else {
            this.serviceShow = false;
          }
        }
      });
    },
    // 理财提示
    financialReminder() {
      this.$toast(this.$t("page3.doc84"));
    },

    get_notice() {
      this.$post(this.URL.home.category, {}).then((res) => {
        if (res.code == 0) {
          this.category = res.data;
        }
      });

      this.$post(this.URL.member.message_list, {
        groupKey: "SYSTEM",
        page: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          this.noticeData = res.data.list;
          // if(this.noticeData.length == 1){
          //     let arr = []
          //     this.noticeData.map(item => {
          //         for(let i = 0; i <= 1; i++){
          //             arr.push(item)
          //         }
          //     })
          //     this.noticeData = arr
          // }
        }
      });

      this.$post(this.URL.home.movie_list, {}).then((res) => {
        if (res.code == 0) {
          this.movieList = res.data;
          let len = this.movieList[2].movieList.length;
          let arr_list = this.movieList[2].movieList;
          if (len > 6) {
            let arr = [];
            arr_list.map((v, k) => {
              if (k <= 5) {
                arr.push(v);
              }
            });
            this.movieList[2].movieList = arr;
            return;
          }
        }
      });
    },
    getAds() {
      this.$post(this.URL.home.ads, {
        positionKey: "INDEX_BANNER",
      }).then((res) => {
        if (res.code == 0) {
          this.bannerData = res.data;
        }
      });
    },
    pathNotice(url, item) {
      this.$router.push({
        path: url,
        query: {
          time: item.date,
          title: item.title,
          doc: item.richText,
        },
      });
    },
    path_url(url) {
      if (url.length < 2) return;
      if (url.indexOf("http") > -1) {
        this.common.openUrl(url);
        return;
      }
      this.$router.push({
        path: url,
        query: {},
      });
    },
    handleScroll() {
      this.isScroll = true;
      clearInterval(timer);

      timer = setTimeout(() => {
        this.isScroll = false;
      }, 800);
    },
    to(n) {
      const { url } = this.$store.state.h5Url.find(({ name }) => n === name);
      window.open(url, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  //background: #22222d url("../../../assets/images/Group32.png") no-repeat top center;
  //background-size: 100% 100%;
  min-height: 100vh;
  background: #101116;
}

.head {
  padding: 0.24rem 0;
  margin-bottom: 0.32rem;

  .lang {
    display: flex;
    align-items: center;
    gap: 0.2rem;

    img {
      height: 0.4rem;
    }
  }

  .logo {
    font-family: MStiffHeiHK;
    font-size: 0.4rem;
    font-weight: 400;

    img {
      width: 66px;
    }
  }

  .so {
    margin: 0 0.6rem;
    height: 0.64rem;
    background: #2a292f;
    border-radius: 0.34rem;
    padding: 0 0.24rem 0 0.3rem;

    input {
      font-size: 0.28rem;
      height: 0.64rem;
      width: 100%;
      background: url("../../../assets/images/ico_so2.png") no-repeat right
        center;
      background-size: auto 0.32rem;
      border: 0;
    }
  }

  .lang {
    img {
      height: 0.4rem;
    }
  }
}

.bg {
  background: none;
}

.videoType {
  margin-bottom: 0.4rem;

  .name {
    font-size: 0.3rem;
    font-weight: 600;
    line-height: 0.3rem;
    letter-spacing: 0.015rem;
    margin-bottom: 0.24rem;
  }

  ul {
    display: flex;
    justify-content: space-between;
    text-align: center;

    li {
      width: 32%;
      border-radius: 0.16rem;
      background: linear-gradient(
        140deg,
        rgba(22, 46, 105, 0.6) 33.87%,
        rgba(122, 13, 40, 0.4) 100%
      );
      padding: 0.4rem 0.2rem;

      img {
        height: 0.88rem;
      }

      span {
        font-size: 0.28rem;
        font-weight: 600;
        line-height: 0.28rem;
        margin-top: 0.2rem;
        display: block;
      }
    }
  }
}

.banner {
  img {
    width: 100%;
    border-radius: 0.1rem;
  }

  .hd {
    text-align: center;
    margin-top: 0.16rem;
    height: 0.08rem;

    .swiper-hd {
      display: inline-block;
      height: 0.08rem;
      border-radius: 0.04rem;
      background: rgba(255, 255, 255, 0.2);

      /deep/ span {
        height: 0.08rem;
        background: none !important;
        display: inline-block;
        vertical-align: top;
        border-radius: 0.04rem;
        width: 0.24rem;
      }

      /deep/ .swiper-pagination-bullet-active {
        background: #fff !important;
      }
    }
  }
}

.notice {
  display: flex;
  background: #181c21;
  border-radius: 1.8rem;
  padding: 0 0.24rem;
  height: 0.52rem;
  margin: 0.24rem 0 0.32rem;

  // display: flex;
  // align-items: center;
  img {
    margin-top: 0.1rem;
    width: 0.32rem;
    height: 0.32rem;
  }

  /deep/ .van-icon__image {
    width: auto;
    height: 0.6rem;
  }

  > div {
    padding: 0;
  }
}

.notice-swipe {
  flex: 1;
  height: 0.72rem;
  line-height: 0.72rem;
  color: #fff;
}

.nav2 {
  display: flex;
  text-align: center;
  padding: 0.4rem 0;

  li {
    flex: 1;
    font-size: 0.23rem;
  }

  img {
    width: 44px;
  }

  .ico {
    margin-bottom: 0.08rem;
  }

  .n {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.24rem;
  }
}

/deep/ .van-popup {
  overflow: unset;
  background: none !important;
}

.no_po {
  position: relative;

  .no_po-con-box {
    max-height: 80vh;

    .no_po-con {
      animation: maxHeight 1.5s ease-in-out;
      overflow-y: auto;
      max-height: 80vh;
    }

    @keyframes maxHeight {
      from {
        max-height: 0;
      }
      to {
        max-height: 80vh;
      }
    }
  }

  .close {
    position: absolute;
    bottom: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300000;
    width: 0.6rem;
    height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0.02rem solid #fff;
    color: #fff;
    font-size: 0.24rem;

    &.noBorder {
      border: none;
    }
  }
}

.videoList {
  margin-bottom: 0.16rem;

  .cname {
    align-items: center;
    color: #fff;
    margin-bottom: 0.24rem;
    gap: 10px;

    .n {
      font-family: var(--fontfamilyFont4);
      font-size: 0.36rem;
      font-weight: 600;
      line-height: var(--lineheight30);
      display: flex;
      align-items: center;
      gap: 0.16rem;
    }

    .v {
      //font-size: 0.24rem;
      //font-family: PingFangSC-Regular, PingFang SC;
      //font-weight: 400;
      //color: #bdbdbd;

      //styleName: www.shayuyingshi.com/PingFang SC/Regular 12;
      font-family: var(--fontfamilyFont4);
      font-size: var(--fontsize12);
      font-weight: 400;
      color: #fff;
    }

    img {
      height: 0.44rem;
    }
  }

  .uilist {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
  }

  .list {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    overflow-x: scroll;

    li {
      width: 48.4%;
      margin-bottom: 0.24rem;
      border-radius: 0.16rem;
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
      position: relative;
      width: 2.2rem;
      display: inline-block;
      margin-right: 0.24rem;
      display: inline-block;

      .pic {
        position: relative;

        img {
          height: 3rem;
          border-radius: 0.24rem;
          object-fit: cover;
          width: 100%;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0.16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: 0.24rem;
          position: absolute;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            270deg,
            #0571fd 0%,
            #7b02fe 100%,
            #7b02fe 100%
          );
          padding: 0.08rem 0.16rem;
          border-radius: 0.24rem 0rem 0.24rem 0.24rem;

          span {
            line-height: 0.4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.3rem;
        height: 0.48rem;
      }

      .info {
        padding: 0.16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: 0.12rem 0 0.24rem 0;
        font-size: 0.24rem;
        align-items: center;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.videoList:last-child {
  margin-bottom: 1rem;

  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      width: 47.33%;
      margin-right: 0rem;

      .pic {
        height: 4.28rem;
        position: relative;

        img {
          height: 100%;
        }
      }
    }
  }
}

.floating-window {
  display: flex;
  flex-direction: column;
  position: fixed;
  gap: 10px;
  bottom: 10%;
  right: 3%;
  transition: 0.5s;

  img {
    width: 48px;
  }
}

.supporter {
  margin-bottom: 0.46rem;

  .title {
    margin-bottom: 0.24rem;
    display: flex;
    align-items: center;
    gap: 10px;
    //justify-content: space-between;

    & > span:first-child {
      font-family: var(--fontfamilyFont4);
      font-size: 0.36rem;
      font-weight: 600;
      line-height: var(--lineheight30);
      display: flex;
      align-items: center;
      gap: 0.16rem;
    }
  }

  .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.24rem;

    & > div {
      background: var(--1, #181c21);
      border-radius: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.part {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  margin-bottom: 0.32rem;
  > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 100%;
    }
  }

  .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .title {
      font-size: 14px;
    }

    .value {
      width: 70%;
      margin-top: 12px;
      font-size: 16px;
      font-weight: 600;
    }

    img {
      width: 52px;
      flex-shrink: 0;
    }
  }
}
</style>
